<div class='intro-admin__steps'>
  <h4 class='header'><%= t('intro.admin.component.name') %></h4>

  <div class='content'>
    <% (@tour.options['steps'] || [{}]).each_with_index do |step, index| %>
      <%= render 'step', step: step, index: index %>
    <% end %>
  </div>

  <%= button_tag class: 'intro-admin__button large add-step-button', type: :button do %>
    &plus;
  <% end %>
</div>

<script>
  $(function () {
    var $steps = $('.intro-admin__steps')

    function refreshStepIndexes () {
      $('.intro-admin__step').each(function (index, step) {
        var $step = $(step)

        $step.find('.js-intro-step-index').text(index + 1)
        $step.find('.checkbox').each(function (_, checkbox) {
          var $checkbox = $(checkbox)
          var scope = $checkbox.data('scope')

          $checkbox.find('> input').attr('id', 'intro-admin__step-' + scope + '-' + index)
          $checkbox.find('> label').attr('for', 'intro-admin__step-' + scope + '-' + index)
        })
      })
    }

    // remove step
    $steps.on('click', '.intro-admin__step-remove', function () {
      var $this = $(this)
      $this.closest('.intro-admin__step').remove()

      refreshStepIndexes()
    })

    // add step
    $steps.on('click', '.add-step-button', function () {
      $steps.find('.content').append("<%= escape_javascript render('step', index: 1) %>")

      refreshStepIndexes()
    })

    // upload image
    function uploadImage (uploadBtn, file) {
      var $uploadBtn = $(uploadBtn)
      var $step = $uploadBtn.closest('.intro-admin__step')
      var $imageUrlInput = $step.find('.js-intro-admin__image-url')
      var formData

      if (!file) {
        $imageUrlInput.val('')
        $imageUrlInput.trigger('change')
        return
      }

      if ($uploadBtn.hasClass('intro-loading')) return

      formData = new FormData()
      formData.append('image', file)

      $.ajax({
        method: 'POST',
        url: "<%= admin_images_path %>",
        data: formData,
        contentType: false,
        processData: false,
        cache: false,
        beforeSend: function () {
          $uploadBtn.addClass('intro-loading')
        },
        success: function (res) {
          if (res.data && res.data.url) {
            $imageUrlInput.val(res.data.url)
          } else {
            $imageUrlInput.val('')
          }
          $imageUrlInput.trigger('change')
          $uploadBtn.removeClass('intro-loading')
        },
        error: function () {
          $uploadBtn.removeClass('intro-loading')
        }
      })
    }

    $steps.on('click', '.js-intro-admin__button-upload', function () {
      var $this = $(this)
      var $imageInput = $this.data('imageInput')

      if (!$imageInput) {
        $imageInput = $('<input type="file" accept="image/jpg, image/jpeg, image/png, image/gif, image/webp">')
        $imageInput.change(function () {
          uploadImage($this, this.files[0])
        })
        $this.data('imageInput', $imageInput)
      }

      $imageInput.trigger('click')
    })

    $steps.on('change', '.js-intro-admin__image-url', function () {
      var $this = $(this)
      var $step = $this.closest('.intro-admin__step')
      var $widthInput = $step.find('.js-intro-admin__image-width')
      var $heightInput = $step.find('.js-intro-admin__image-height')

      if ($this.val()) {
        $('<img />').attr('src', $this.val()).load(function () {
          $widthInput.val(this.width)
          $heightInput.val(this.height)
        })
      } else {
        $widthInput.val('')
        $heightInput.val('')
      }
    })
  })
</script>